flex布局

Posted on | In

flex是Flexible Box的缩写，意为“弹性布局”，是css3中作用于动态元素或者不知名大小元素的新布局，主要用于元素对齐、方向和容器的组织方式。flex容器最主要的特点是其能以最好的方式修改不同大小子元素的width和height，使其填满可用空间。

基础

flex布局由flex容器的父元素和其直接子元素flex items 组成。
image

用法

在父HTML元素上设置属性display就可以使用flex布局。

1
2
3
4
.flex-container {
    display: -webkit-flex;      //Safari
    display: flex;
}

若想表现得像行内元素

1
2
3
4
.flex-container {
    display: -webkit-inline-flex;       //Safari
    display: inline-flex;
}

父元素上只需设置这一个属性，其全部直接子元素会自动转变为flex items。

有许多方式能组织flexbox属性，但总的来说，最简便的还是将元素分为两个部分：flex容器和flexZ子元素。以下会介绍它们，并且说明其如何影响布局表现。

flexbox容器属性

flex-direction

该属性通过设置flex容器的主轴方向来指定flex元素在容器中排列的方向。

flex-direction 描述
row（默认值） 主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在上沿
column-reverse 主轴为垂直方向，起点在下沿 
1
2
3
4
.flex-container {
    -webkit-flex-direction: row;        //Safari
    flex-direction: row;
}

row 方向为从左到右排列
image

1
2
3
4
.flex-container {
    -webkit-flex-direction: row-reverse;        //Safari
    flex-direction: row-reverse;
}

row-reverse方向，flex元素从右到左行排列
image

1
2
3
4
.flex-container {
    -webkit-flex-direction: column;         //Safari
    flex-direction: column;
}

column flex元素从上到下列排列
image

1
2
3
4
.flex-container {
    -webkit-flex-direction: column-reverse;         //Safari
    flex-direction: column-reverse;
}

选择column-reverse，flex元素从下到上列排列
image

flex-wrap

原始flexbox观念是容器在一条线上设置其子元素。flex-wrap属性用于控制flex容器中的子元素是在一条还是多条线上排列，并且控制多出来的行堆叠的方向。

1
2
3
4
.flex-container {
    -webkit-flex-wrap: nowrap;          //Safari
    flex-wrap: nowrap;
}

flex元素一行排列，默认情况下会有一定缩放来适应元素的宽度
image

1
2
3
4
.flex-container {
    -webkit-flex-wrap: wrap;            //Safari
    flex-wrap: wrap;
}

flex元素在多行上按从上从左到右，从上到下的方式排列
image

1
2
3
4
.flex-container {
    -webkit-flex-wrap: wap-reverse;     //Safari
    flex-wrap: wap-reverse;
}

flex元素在多行上按从左到右，从下到上的方式排列
image

默认值：==nowrap==

flex-flow

该属性是flex-direction 和 flex-wrap 属性的简写。

1
2
3
4
.flex-container {
    -webkit-flex-flow: ||;      //Safari
    flex-flow: ||;
}

默认值：==row nowrap==

justify-content

justify-content属性在flex容器当前行主轴线上对齐flex元素。它能分配多余可用空间，不管flex元素在一条线上表现为不可改变，或者可变但是已是最大尺寸。

1
2
3
4
.flex-container {
    -webkit-justify-content: flex-start;    //Safari
    justify-content: flex-start;
}

flex元素左对齐
image

1
2
3
4
.flex-container {
    -webkit-justify-content: flex-end;      //Safari
    justify-content: flex-end;
}

flex元素右对齐
image

1
2
3
4
.flex-container {
    -webkit-justify-content: center;    //Safari
    justify-content: center;
}

flex元素居中
image

1
2
3
4
.flex-container {
    -webkit-justify-content: space-between;     //Safari
    justify-content: space-between;
}

flex元素相邻元素之间有等距间隔，首位元素与容器边缘对齐

image

1
2
3
4
.flex-container {
    -webkit-justify-content: space-around;      //Safari
    justify-content: space-around;
}

flex元素每个元素周围有一定间距，首位元素亦如此
images

默认值：==flex-start==

align-items

flex元素沿当前容器交叉轴对齐，与justify-content相同，所不同的是方向。该属性设置所有元素的默认对齐方式，即使是未布局的元素。

1
2
3
4
.flex-container {
    -webkit-align-items: stretch;       //Safari
    align-items: stretch;
}

flex元素从交叉轴起点到终点填满整个高度
images

1
2
3
4
.flex-container {
    -webkit-align-items: flex-start;    //Safari
    align-items: flex-start;    
}

flex元素按交叉轴起点对齐
images

1
2
3
4
.flex-container {
    -webkit-align-items: flex-end;      //Safari
    align-items: flex-end;
}

flex元素按交叉轴终点对齐
images

1
2
3
4
.flex-container {
    -webkit-align-items: center;    //Safari
    align-items: center;
}

flex元素按交叉轴中点对齐
image

1
2
3
4
.flex-container{
    -webkit-align-items: baseline;      //Safari
    align-items: baseline;
}

flex元素按每一行基线对齐
image

默认值：==stretch==

align-center

该属性轴线有多余空间时，定义flex容器每一行的对齐方式，当只有一行元素时，与justify-content属性对齐方式相同。

1
2
3
4
.flex-container {
    -webkit-align-content: stretch;     //Safari
    align-content: stretch;
}

flex元素每行分配相等间距
image

1
2
3
4
.flex-container {
    -webkit-align-content: flex-start;      //Safari
    align-content: flex-start;
}

flex元素沿交叉轴起点对齐
images

1
2
3
4
.flex-container {
    -webkit-align-content: flex-end;    //Safari
    align-content: flex-end;
}

flex元素沿交叉轴终点对齐
image

1
2
3
4
.flex-container {
    -webkit-align-content: center;      //Safari
    align-content: center;
}

flex元素每行在容器内居中对齐
image

1
2
3
4
.flex-container {
    -webkit-align-content: space-between;       //Safari
    align-content: space-between;
}

flex元素每行有等距间隔，首位行与flex容器边缘对齐
image

1
2
3
4
.flex-container {
    -webkit-align-content: space-around;    //Safari
    align-content: space-around;
}

flex元素每行周围有相等空间
images

默认值：==stretch==

注意事项：该属性只有在flex容器包含多行元素时才会生效，若为当行元素，该属性无效。

flex容器注意事项

  • 所有colunm-*属性对flex container 均无效。
  • ::first-line与::first-letter伪元素对flex容器无效

flexbox元素属性

order

该属性控制flex容器中子元素排列顺序，数值越小，排列越靠前，默认值伪0。

1
2
3
4
.flex-item {
    -webkit-order: ;    //Safari
    order: ;
}

该属性能在不重构HTML代码的情况下重新排列flex元素。
image

默认值：==0==

flex-grow

当容器有剩余空间时，该属性定义flex元素相对于其它元素的放大比例

1
2
3
4
.flex-ite {
    -webkit-flex-grow: ;    //Safari
    flex-grow: ;
}

若所有元素均有相同flex-grow值，则在容器中它们大小相同。
images

第二个元素相对于其它元素而言占据更多空间
image

m默认值：==0==

注意事项：==负值无效==

flex-shrink

若空间不足，该属性定义元素相较于其它元素而言缩小比例

1
2
3
4
.flex-item {
    -webkit-flex-shrink: ;      //Safari
    flex-shrink: ;
}

一般情况下，所有元素都可以被缩小，但若值设为0则保留原始大小
images

默认值：==1==

注意：==负值无效==

flex-basis

该属性与width和heigh属性取值相同，在分配多余空间之前定义flex元素的初始大小。

1
2
3
4
.flex-item {
    -webkit-flex-basis: auto;       //Safari
    flex-basis: auto;
}

flex-basis确定了第四个元素的初始大小
images

m默认值：==auto==

flex

该属性是flex-grow, flex-shrink和flex-basis的简写。

1
2
3
4
.flex-item {
    -webkit-flex: ;     //Safari
    flex:  ;
}

默认值：==0 1 auto==

align-self

align-self属性允许单个元素与其它元素有不一样的对齐方式，可覆盖align-items属性。

1
2
3
4
.flex-item {
    -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch;     //Safari
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

第三、四个元素的align-self属性覆盖了其对齐方式
images

默认值：==auto==

注意：默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch

flex元素注意事项

  • float，clear与vertical-align均对其无效，也不会使其脱离文档流。